<template>
	<view class="lv-detail" :class="lvClass">
		<!-- <image class="img" src="@/static/result/result-img.png" mode="aspectFit"></image> -->
		<u-image height="600rpx"  mode="aspectFit" class="sentence-img" src="https://nx5.abc5g.com/res/static/result/result-img.png"></u-image>
		<view class="cnt-content">
			<view class="tips">本次涉及词汇<text class="all-cnt">{{cnt1+cnt2+cnt3+cnt4}}</text>个</view>
			<view class="cnt">
				<view class="label">8-9 阶生词 </view>
				<view class="value"><text class="value-text value-text-a">{{cnt1}}</text>个</view>
			</view>
			<view class="cnt">
				<view class="label">5-7 阶生词 </view>
				<view class="value"><text class="value-text value-text-b">{{cnt2}}</text>个</view>
			</view>
			<view class="cnt">
				<view class="label">1-4 阶生词 </view>
				<view class="value"><text class="value-text value-text-c">{{cnt3}}</text>个</view>
			</view>
			<view class="cnt">
				<view class="label">熟悉词 </view>
				<view class="value"><text class="value-text value-text-d">{{cnt4}}</text>个</view>
			</view>
		</view>

		<view class="bottom-btn-box">
			<u-button @click="handelNext" class="next-btn w-full" type="warning" :plain="true">
				<view class="next-text">继续</view>
			</u-button>
		</view>
		<!-- <view v-if="isteacher==1" style="margin-top: 20rpx;">
			<u-button @click="reviewclassover" class="next-btn w-full" type="warning" :plain="true">
				<view class="next-text">下课</view>
			</u-button>
		</view> -->
	</view>
</template>

<script lang="ts" setup>
	import { computed, inject } from 'vue';
	import { IWord, useStudyStore } from '@/store/study';
	import { ktlapi } from '@/utils';

	const reviewprops = withDefaults(defineProps<{isreview?:number; reviewles?:string; isteacher?:number}>(),{ isreview: 0,reviewles:"",isteacher:0 })

	/** 测试结果 */
	defineOptions({ name: 'lv-result', inheritAttrs: false, virtualHost: true });
	// hooks 初始化
	const studyStore = useStudyStore();
	const emit = defineEmits(['next']);

	const isteacher = inject('isteacher');
	const isreview = inject('isreview');
	
	const lvClass = computed(() => {
		if(!isteacher && !isreview) {
			return 'lv-teacher-rember';
		}
		
		if(isteacher && isreview) {
			return 'lv-teacher-review'
		}
		
		if(isreview) {
			return 'lv-review'
		}
		
		return '';
	})

	// 复习课下课
	function reviewclassover(){
		uni.showModal({
			content: '是否确认下课?'
		}).then(res => {
			if(res.confirm){  
				ktlapi({
					action: 'Cus_OverLesson',
					data: {
						LessonUUID: reviewprops.reviewles
					}
				}).then(() => { 
					uni.redirectTo({
						url:"/pages-study/study/modules/step-final-result?isreview="+reviewprops.isreview+"&LessonId="+reviewprops.reviewles
					}) 
				})
				
				
			}
		})
		
	}

	const cnt1 = computed(() => {
		return studyStore.wordGroup.filter(item => item.LostLv > 14).length;
	})
	const cnt2 = computed(() => {
		return studyStore.wordGroup.filter(item => item.LostLv > 8 && item.LostLv <= 14).length;
	})
	const cnt3 = computed(() => {
		return studyStore.wordGroup.filter(item => item.LostLv > 0 && item.LostLv <= 8).length;
	})
	const cnt4 = computed(() => {
		return studyStore.wordGroup.filter(item => item.LostLv === 0).length;
	})


    console.log('studyStore.wordGroup', studyStore.wordGroup)

	function handelNext() {
		emit('next');
	}
</script>


<style lang="scss" scoped>
	.lv-detail {
		--font-color: #332c2b;
	}

	.lv-detail {
		flex: 1;
		display: flex;
		flex-flow: column;
		
		
		
		.img{
			width: 100%; height: 600rpx;
		}
		
		.cnt-content{
			flex: 1
		}

		.tips { text-align: center; margin-top: 30rpx; margin-bottom: 50rpx; font-size: 40rpx; }

		.all-cnt{
			margin-right: 10rpx;
			margin-left: 10rpx;
			font-size: 60rpx;
		}
		.cnt { display: flex; justify-content: center; font-size: 38rpx; margin-bottom: 20rpx; }

		.label {  text-align: right;  margin-right: 5px;}

		.value {   text-align: left; }
		.value-text{ margin-right: 10rpx; }
		.value-text-a{ color: #a04041; }
		.value-text-b{ color: #b82527; }
		.value-text-c{ color: #d20508; }
		.value-text-d{ color: #d20508; }
	}
	
	/* #ifdef H5 */
	.lv-detail.lv-teacher-rember{}
	.lv-detail.lv-teacher-review{}
	.lv-detail.lv-review{}
	/* #endif */
	
	/* #ifdef MP */
	.lv-detail.lv-teacher-rember{}
	.lv-detail.lv-teacher-review{}
	.lv-detail.lv-review{}
	/* #endif */
	
	.next-text {
		font-size: 38rpx;
		font-weight: bold;
		display: flex;
	}

	/* 针对 1280px 分辨率 */
	@media(min-width:1200px) {}
</style>